<template>
  <div id="myinput">
    <p>父级传递的值： {{number}}</p>
    <button v-on:click="findVal">获取numberValue</button>
    <p>input 元素：</p>
    <input v-model="message" placeholder="编辑我……">
    <p>消息是: {{ message }}</p>

    <p>textarea 元素：</p>
    <p style="white-space: pre">{{ message2 }}</p>
    <textarea v-model="message2" placeholder="多行文本输入……"></textarea>

    <!--子向父传递信息 通过事件的形式传递 -->
    <button @click="emitMyEvent">emit</button>
  </div>
</template>

<script>
export default {
  //父组件传值给子组件值，子组件需要声明一个属性props:['number']
  //这种方式相当于在data中添加了一个属性number，同样可以使用this.number 获取到值。只不过是这个方式是父传子的值使用。
  props: ['number'],
  name: 'myinput',
  data () {
    return {
      message: 'Runoob',
      message2: '菜鸟教程\r\nhttp://www.runoob.com'
    }
  },
  methods: {
    findVal(){
      console.log(this.number);
    },
    //这个点击事件触发了一个 my-event事件，把message值传递过去
    emitMyEvent(){
      console.log('通过事件方式，开始向父组件发送参数值message '+this.message)
      this.$emit('my-event',this.message);
    }
  }
}
</script>
